<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="formInline.region" placeholder="请选择部门">
        <el-option label="人事部" value="人事部">人事部</el-option>
        <el-option label="技术部" value="技术部">技术部</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="formInline.grouping" placeholder="请选择分组">
        <el-option label="一组" value="一组">一组</el-option>
        <el-option label="二组" value="二组">二组</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="formInline.whether" placeholder="请选择是否考勤">
        <el-option label="是" value="是"></el-option>
        <el-option label="否" value="否"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="请选择入职日期"
        >
        </el-date-picker>
      </div>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReaet">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
        grouping: "",
        whether: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    onReaet() {
      console.log("reset");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    width: 185px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 190px;
  }
}
</style>